<script setup>
import {reactive} from 'vue'
import bingtu from '../components/bingtu.vue'
import mapp from '../components/mapp.vue'
import xiaoshou from '../components/xiaoshou.vue'
import xuqiu from '../components/xuqiu.vue'
import zhuzhuangtu from '../components/zhuzhuangtu.vue'
import place from '../components/place.vue'
import box from '../components/box.vue'

</script>

<template>
        <!-- 模块 二行三列 -->
        <div class="module-box">
            <div  style="flex:0 1 25%">
                <dv-border-box4 style="width:100%;flex-direction: column;height:200px;">
                    <CapsuleChart height="400px"/>
                    <zhuzhuangtu></zhuzhuangtu>
                </dv-border-box4>
                <dv-border-box13 style="width:100%;flex-direction: column;height:200px;">
                    <CapsuleChart height="400px"/>
                    <box></box>
                </dv-border-box13>
                <dv-border-box12 style="width:100%;height:300px;">
                    <bingtu></bingtu>
                </dv-border-box12>
                
            </div>
        <!--第二列-->
        <div  style="flex:0 1 50%">
    
                <div small-bg>
                    <dv-decoration3 style="width:100%;height:40px;"/>
                </div>
                <dv-border-box7 style="width:98%;height:500px; border-width: 5px; border-style: solid; border-color: black;">
                    <conicalColumnChart height="250px" />
                    <mapp></mapp>
                </dv-border-box7>
                <div small-bg>
                    <dv-decoration-5 style="width:100%;height:40px;" />
                </div>
                <div small-bg>
                    <dv-decoration3 style="width:100%;height:80px;"/>
                </div>
                
                
            </div>
            <!--第三列-->
            <div  style="flex:0 1 25%">
                <dv-border-box-4 style="width:100%;flex-direction: column;height:200px;">
                    <CapsuleChart height="200px"/>
                    <xuqiu></xuqiu>
                </dv-border-box-4 :reverse="false">
                <dv-border-box1 style="width:100%;flex-direction: column;height:200px;">
                    <CapsuleChart height="200px"/>
                    <xiaoshou></xiaoshou>
                </dv-border-box1>
                <dv-border-box12 style="width:100%;height:300px;">
                    <place></place>
                    <!-- <dv-water-level-pond :config="config" style="width:100%;height:300px" /> -->
                </dv-border-box12>
            </div>
        </div>
    </template>
    
    <style scoped>
    
    </style>